// 计算属性缓存 vs 方法
//  计算属性是基于它们的[响应式依赖]进行缓存的
//  调用方法将总会再次执行函数

const app = new Vue({
  data: {
    msg: 'hello vue',
    list: [22, 'cc', 'aaa'],
    firstName: 'Foo',
    lastName: 'Bar',
    // fullName: 'Foo Bar'
  },
  watch: { // 观察和响应 Vue 实例上的数据变动：侦听属性
    /*
    firstName(newVal) {
      this.fullName = newVal + ' ' + this.lastName
    },
    lastName(newVal) {
      this.fullName = this.firstName + ' ' + newVal
    },*/
    msg(newVal, beforeVal) {
      console.log(this.msg)
    },
    list(before, after) {
      console.log(before)
      console.log(after)
      console.log('list发生变化了')
    }
  },
  computed: {
    fullName: {
      get() {
        return this.firstName + ' ' + this.lastName
      },
      set(newValue) {
        let names = newValue.split(' ')
        this.firstName = names[0]
        this.lastName = names[names.length - 1]
      }
    },
    /*
    fullName() {
      return this.firstName + ' ' + this.lastName
    },*/
    now() {
      return Date.now()
    },
    msg1() {
      return this.msg.repeat(10)
    },
    total() {
      return this.list.length === 0 ? '无' : this.list.length
    }
  },
  methods: {
    total1() {
      return this.list.length === 0 ? '无' : this.list.length
    },
    now1() {
      return Date.now()
    },
  }
}).$mount('#app')
